<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
            color: black;
        }

        a:hover {
            color: antiquewhite;
        }

        .top {
            display: flex;
            justify-content: start;
        }

        .guanyu,
        .nanzi,
        .nvzi,
        .huaban,
        .huaxue,
        .gengduo,
        .huaxuan,
        .huiyuan {
            line-height: 181px;
            color: black;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            font-size: medium;
            font-weight: 800;
            width: 120px;
            height: 50px;
            text-align: center;
        }

        .V,
        .dingzhi {
            line-height: 181px;
            color: black;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            font-size: medium;
            font-weight: 800;
            width: 140px;
            height: 50px;
            text-align: center;
        }

        .search {
            border-color: rgba(169, 151, 151, 0.521);
            border-width: 1px;
            border-style: solid;

            line-height: 181px;
            color: black;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            font-size: medium;
            font-weight: 800;
            width: 120px;
            height: 30px;
            text-align: center;

        }

        .border {
            position: relative;
            top: -52px;
            left: 1350px;
            border-color: rgba(169, 151, 151, 0.521);
            border-width: 1px;
            border-style: solid;
            width: 130px;
            height: 25px;
            color: rgb(211, 220, 228);
            background-image: url(./icon_sprite.png);
            background-repeat: no-repeat;
            background-position: right;
        }

        .nvshen {
            background-color: black;
            color: aliceblue;
            text-align: center;
            line-height: 19px;
            position: relative;
            top: -30px;
        }

        .top2 {
            position: relative;
            top: -180px;
            right: -1050px;
            color: rgba(169, 169, 169, 0.374);
            font-weight: 800;
        }

        .top3 {
            color: rgb(183, 180, 180);
        }

        .datu {
            position: relative;
            top: -62px;
        }

        h1 {
            text-align: center;
        }

        .goods {
            display: flex;
            justify-content: space-around;
            text-align: center;
        }

        .a .goods .good:hover {
            transform: translateY(-5px);
        }

        .a .goods .good {

            width: 300px;
            height: 421px;
            margin-top: 30px;
            margin-bottom: 30px;
            transition: transform 1s;
        }

        .d {
            width: 300px;
            height: 300px;
        }

        .buy1 {
            width: 160px;
            height: 56px;
            background-color: black;
            color: white;
            line-height: 56px;
            margin: auto;
            margin-top: 30px;
        }

        .left {
            background-image: url(https://vans.com.cn/themes/Vans/images/arrow-left-black.svg);
            background-repeat: no-repeat;
        }

        .iterms {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            text-align: center;
            margin-top: 30px;
        }

        .iterm {
            width: 710px;
            height: 500px;
            margin-top: 30px;
            border: 2px solid transparent
        }

        .iterm .cover {
            height: 100px;
        }

        .iterms .iterm:hover {
            background-color: #000;
            color: #fff;
        }

        .iterm:hover {
            border: 2px solid #2d2b2b9a;
        }


        .e {
            width: 710px;
            height: 400px;
        }

        .news {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            text-align: center;
            margin-top: 41px;

        }

        .news .new:hover {
            transform: translateY(-5px);
        }

        .news .new {
            margin-top: 20px;
            transition: transform 1s;
        }

        .c {
            width: 160px;
            height: 56px;
            background-color: black;
            color: white;
            line-height: 56px;
            margin: auto;
            margin-top: 30px;

        }

        .M {
            display: flex;
            justify-content: space-around;
            margin-top: 50px;
        }

        .beijing1 {
            color: white;
            font-weight: 900;
            font-size: x-large;
            text-align: center;
            position: relative;
            top: -119px;
            left: 3px;

        }

        .beijing2 {
            color: white;
            font-weight: 900;
            font-size: x-large;
            text-align: center;
            position: relative;
            top: -119px;
            left: 3px;
        }

        .beijing3 {
            color: white;
            font-weight: 900;
            font-size: x-large;
            text-align: center;
            position: relative;
            top: -119px;
            left: 3px;
        }

        .beijing4 {
            color: white;
            font-weight: 900;
            font-size: x-large;
            text-align: center;
            position: relative;
            top: -119px;
            left: 3px;
        }

        .M .m:hover {
            transform: translateX(-10px);
        }

        .M .m {
            transition: transform 1s;
        }

        .bottom {
            display: flex;
            justify-content: space-around;
            background-color: rgba(28, 28, 28);
            color: aliceblue;
            line-height: 27px;
            height: 350px;


        }

        .help23 {
            display: flex;
            justify-content: space-between;
            width: 400px;
        }

        .contact {
            border-style: solid;
            border-left-color: rgb(226, 226, 226);
            border-right-color: rgb(226, 226, 226);
            border-bottom-color: black;
            border-width: 1px;
            width: 350px;
            text-align: center;
        }

        .bottom2 {
            background-color: rgba(28, 28, 28);
            display: flex;
            justify-content: flex-start;
            color: aliceblue;

        }

        .ziti {
            color: white;
        }
    </style>
</head>

<body>

    <div class="top">
        <img src="./屏幕截图2 2023-03-06 000309.png" alt="" width="230px" height="130px">
        <div class="guanyu">
            <a href="#">关于vans</a> &nbsp; &nbsp; &nbsp; /
        </div>
        <div class="nanzi">
            <a href="#">男子</a> &nbsp; &nbsp; &nbsp; /
        </div>
        <div class="nvzi">
            <a href="http://little--starrr.gitee.io/test/index.html/vans/dyx02/dyx.html">女子</a> &nbsp; &nbsp; &nbsp; /
        </div>
        <div class="V">
            <a href="#">VAULT BY VANS</a> &nbsp; /
        </div>
        <div class="huaban">
            <a href="http://little--starrr.gitee.io/test/index.html/vans/zyx02/zyx.html">滑板</a> &nbsp; &nbsp; &nbsp; /
        </div>
        <div class="huaxue">
            <a href="#">滑雪</a> &nbsp; &nbsp; &nbsp; /
        </div>
        <div class="dingzhi">
            <a href="#">CUSTOMS 定制鞋</a> &nbsp; /
        </div>
        <div class="gengduo">
            <a href="#">更多产品 </a>&nbsp; &nbsp; &nbsp; /
        </div>
        <div class="huiyuan">
            <a href="#">会员之家</a>
        </div>
    </div>
    <div class="border">
        搜索
    </div>

    <div class="nvshen">
        女神节焕新，低至五折嗨抢
    </div>

    <div class="top2">
        <img src="./购物车3.png" alt="购物车">
        <a class="top3" href="#">我的购物车</a>
        &nbsp;
        &nbsp;
        <img src="./用户2.png" alt="登录">
        <a class="top3" href="#">登录</a>
        /
        <a class="top3" href="#">注册</a>
        &nbsp;
        <img src="./搜索2.png" alt="搜索店铺">
        <a class="top3" href="#">搜索店铺</a>
    </div>

    <div class="datu">
        <a
            href="https://vans.com.cn/product/omu_wallpaper_sp23#banner=sp23_product_wallpaper.wallpaper.jpg.herocarousel_1">
            <img src="./大图片.jpg" alt="" width="1500" height="700.5"></a>

    </div>

    <div class="a">
        <h1><img src="./尖货日历.png" alt="尖货日历"></h1>
        <div class="goods">
            <a class="good" href="#" target="_blank">
                <img src=" ./联名系列.jpg" class="d">

                <p>2月25日</p>

                <h3>VANS × LIBERAIDERS︎ </h3>
                <h3>联名系列</h3>

                <div class="c">立即选购</div>
            </a>
            <div class="good">
                <a href=#" target="_blank"> <img
                        src="https://img3.vans.com.cn/public/images/8a/77/41/34f22f5b296f00a4614996ec310008ef1507db01.jpg?1674011876#h"
                        class="d">

                    <p>1月27日</p>

                    <h3> VAULT BY VANS × JOE FRESHGOODS </h3>

                    <div class="c">立即选购</div>
                </a>
            </div>
            <div class="good">
                <a href="#" target="_blank"><img
                        src="https://img3.vans.com.cn/public/images/33/d4/f1/015525bdcb0be2b644b225e91e0ff591d67f35eb.jpg?1671527061#h"
                        class="d">

                    <p>12月20日</p>

                    <h3>VANS × TIMBERLAND </h3>
                    <h3>联名系列</h3>

                    <div class="c">立即选购</div>
                </a>
            </div>
        </div>
    </div>

    <br>
    <br>

    <h1>新品速递</h1>
    <div class="news">

        <a class="new" href="#" target="_blank"><img src="./冲浪环保鞋.jpg" alt="" width="436px" height="436px">
            <h3>
                VANS VR3 <br>冲浪环保鞋服系列
            </h3>
            <div class="c">立即选购</div>
        </a>



        <a class="new" href="#" target="_blank"><img src="./女神节焕新.jpg" alt="" width="436px" height="436px">
            <h3>
                女神节焕新<br> 低至五折嗨抢
            </h3>
            <div class="c">立即选购</div>
        </a>


        <div class="new">
            <a href="#" target="_blank"><img src="./联名冲浪鞋服.gif" alt="" width="436px" height="436px">
                <h3>
                    VANS × MAMI WATA <br> 联名冲浪鞋服系列
                </h3>
                <div class="c">立即选购</div>
            </a>

        </div>
        <div class="new">
            <a href="#" target="_blank"><img src="./联名鞋服系列.jpg" alt="" width="436px" height="436px">
                <h3>
                    VANS × COLLINA STRADA <br> 联名鞋服系列
                </h3>
                <div class="c">立即选购</div>
            </a>

        </div>
        <div class="new">
            <a href="#" target="_blank"><img src="./内在.gif" alt="" width="436px" height="436px">
                <h3>
                    THE SKATE OLD SKOOL 内在亦如 <br> BREANA GEERING 职业滑板服系列
                </h3>
                <div class="c">立即选购</div>
            </a>

        </div>
        <div class="new">
            <a href="#" target="_blank"><img src="./查看更多.jpg" alt="" width="436px" height="436px">
                <h3>
                    <br>查看更多
                </h3>
                <div class="c">立即选购</div>
            </a>

        </div>
    </div>



    <div class="M">
        <div class="m">
            <a href="#"><img src="./高端.jpg" alt="" width="325px" height="200px">
                <div class="beijing1">
                    <h3>VAULT BY VANS</h3>
                    <p>高端支线</p>
                </div>
            </a>
        </div>
        <div class="m">
            <a href="#"><img src="./经典.jpg" alt="" width="325px" height="200px">
                <div class="beijing2">
                    <h3>CLASSICS</h3>
                    <p>经典系列</p>
                </div>
            </a>

        </div>
        <div class="m">
            <a href="#"><img src="./滑板系列.jpg" alt="" width="325px" height="200px">
                <div class="beijing3">
                    <h3>SKATEBOARDING</h3>
                    <p>滑板系列</p>
                </div>
            </a>
        </div>
        <div class="m">
            <a href="#"><img src="./自由定制鞋.gif" alt="" width="325px" height="200px">
                <div class="beijing4">
                    <h3>CUSTOMS</h3>
                    <p>自由定制鞋</p>
                </div>
            </a>
        </div>

    </div>

    <h1><br>最新活动</h1>
    <div class="b">
        <div class="iterms">

            <a class="iterm" href="#" target="_blank">
                <img src="./进入艺术家的大脑.jpg" class="e">
                <div class="cover">

                    <h3>进入艺术家大脑,VANS邀你一起“不设限就无限”</h3>
                    <p>VANS| 奇点计划® 上海特展开幕</p>
                </div>
            </a>


            <a class="iterm" href="https://vans.com.cn/article/skate_lava_sp23#banner=sp23_article_LAVA.LAVA.jpg.fourth"
                target="_blank">
                <img src="./亚太最新滑板影片.jpg" width="748.4px" class="e">
                <div class="cover">
                    <h3>VANS亚太最新滑板影片</h3>
                    <p>一部全新的滑板影片为您介绍团队新成员：Basral Graito和Rubianda</p>
                </div>

            </a>


            <a class="iterm"
                href="https://vans.com.cn/article/skate_shop_day_sp23#banner=sp23_article_SkateShopDay.SkateShopDay.jpg.fourth"
                target="_blank">
                <img src="./世界滑板店.jpg" class="e">
                <div class="cover">
                    <h3>注意看！是世界滑板「店」日！</h3>
                    <p>一起庆祝属于滑板的盛宴，城市循滑、抽盲盒等多重活动等你玩！</p>
                </div>

            </a>


            <a class="iterm"
                href="https://vans.com.cn/article/snow_hi_standard_recap_sp23#banner=sp23_article_HiStandardRecap.HiStandardRecap.jpg.fourth"
                target="_blank">
                <img src="./圆满收官.jpg" class="e">
                <div class="cover">
                    <h3>VANS HI-STANDARD SERIES单板赛事兔年重磅回归圆满收官</h3>
                    <p>“范儿”依然是全部！本次的Hi-Standard Series第一次在夜场开放，时间刚过六点，滑手们已经迫不及待等在了麦罗公园，开始签到，领取Vans号码背心和准备的限量小礼品。</p>
                </div>
            </a>

        </div>
    </div>
    <br>
    <br>

    <div class="bottom">

        <div class="help">
            <br>
            <div class="help1">
                <h3>获取帮助</h3>
            </div>
            <br>
            <div class="help23">
                <div class="hlep2">
                    购物
                    <br>
                    <a class="ziti" href="#">男子</a>
                    <br>
                    <a class="ziti" href="#">女子</a>
                    <br>
                    <a class="ziti" href="#"> CUSTOMS</a>
                    <br>
                    <a class="ziti" href="#"> VAULT BY VANS</a>
                    <br>
                    <a class="ziti" href="#"> 职业鞋款</a>
                    <br>
                    <a class="ziti" href="#">查找店铺</a>
                </div>

                <div class="help3">
                    公司
                    <br>
                    <a class="ziti" href="#"> VANS会员之家的会员条款</a>
                    <br>
                    <a class="ziti" href="#">VANS会员之家</a>
                    <br>
                    <a class="ziti" href="#">未来始于当下</a>
                    <br>
                    <a class="ziti" href="#">客户服务</a>
                    <br>
                    <a class="ziti" href="#">使用条款</a>
                    <br>
                    <a class="ziti" href="#">隐私政策</a>

                </div>
            </div>


        </div>

        <div class="contact">
            <br>
            <h3>联系我们</h3>
            <br>
            客服电话
            <p>010-58103517</p>
            <p>10：00-18：00</p>
            <br>
            <h3>地址</h3>
            <p>中国上海市南京西路688号8楼</p>
        </div>

        <div class="find">
            <br>
            <h3>在这些地方找到我们</h3>
            <br>
            <img src="./在这些地方找到我们.png" alt="">

        </div>

    </div>

    <div class="bottom2">

        <img src="./底部logo.png" alt="">
        <div class="wenzi">
            <p>
                沪ICP备2022009199号 工信部网站 沪公网安备 31010602006780号 营业执照
            </p>
            <p>
                威富（上海）企业发展有限公司 版权所有
            </p>
            <p>
                选择您所在的区域
            </p>
            <p>
                <img src="./中国.png" alt="">
            </p>

        </div>

    </div>
</body>

</html>